<template>
  <div class="container">
    <div class="info-container">
      <div class="line">
        <div class="image-container"></div>
      </div>
      <div v-for="p in systemInfo" :key="p.id" class="line">
        <span style="width: 150px">{{ statusEnum[p.name] }}: </span>
        <el-input v-model="p.content" style="width: 200px" disabled/>
        <el-button class="btn" @click="edit(p)">
          <img :src="imgPath" alt="" class="icon" />
        </el-button>
      </div>
    </div>
    <edit-dialogue-vue :isVisible="editIsVisible" :standard="standard" @hide="hide" @updateData="querySystemInfo"></edit-dialogue-vue>
  </div>
</template>

<script>
import EditDialogueVue from './EditDialogue.vue';
import {StatusEnum} from "@/utils/enum/standardEnum";

export default {
  components: {
    EditDialogueVue
  },
  created() {
    this.querySystemInfo();
  },
  data() {
    return {
      systemInfo: {},
      statusEnum: StatusEnum,
      imgPath: require("@/assets/images/edit.png"),
      editIsVisible: false,
      standard: {},
    };
  },
  methods: {
    querySystemInfo() {
      this.$store
        .dispatch("request/get", "/basic/standard/all")
        .then((response) => {
          this.systemInfo = response;
        });
    },
    edit(standard){
        this.standard = standard
        this.editIsVisible = true
    },
    hide(){
        this.editIsVisible = false
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-container {
  height: 60%;
  width: 60%;
  display: block;
}
.line {
  display: flex;
  align-items: center; /* align items in center vertically */
  justify-content: center; /* align items in center horizontally */
  margin:10px;
}

.image-container {
  height: 200px; /* set container height */
  width: 200px; /* set container width */
  border-radius: 50%; /* create round container */
  overflow: hidden; /* hide overflowing content */
  background-size: contain;
  background-image: url("../../assets/images/school.jpg");
  //   transform: translate(0%, 30%);
}
.btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  border: none;
  background: transparent;
}

.icon {
  width: 30px;
  height: 30px;
}
.btn:hover {
  background-color: #ccc;
}

.icon:hover {
  filter: brightness(80%);
}
</style>